<template>
  <div class="arratContent">
    <h5 class="leftText">{{ labelRuleValue.title }}</h5>
    <div class="rightContent">
      <!-- <el-form
      :model="labelRuleValue"
      ref="dynamicValidateForm"
      label-width="100px"
      class="demo-dynamic"
    > -->
      <div
        v-for="(domain, index) in labelRuleValue.value"
        :key="index"
        class="rightflex"
      >
        <el-form-item
          v-for="(itemValue, key) in domain"
          :key="key"
          :props="'domains.' + index + '.' + key"
        >
          <el-input
            :value="itemValue"
            clearable
            @input="handleValue($event, index, key)"
            :disabled="disabledValue"
          ></el-input>
        </el-form-item>
        <el-button
          v-if="index == 0"
          icon="el-icon-plus"
          type="primary"
          circle
          :disabled="disabledValue"
          @click="addDomain(domain)"
        ></el-button>
        <el-button
          v-if="index != 0"
          type="danger"
          icon="el-icon-delete"
          circle
          :disabled="disabledValue"
          @click.prevent="removeDomain(domain)"
        ></el-button>
      </div>
      <!-- </el-form> -->
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Array, //对应值
      default: function () {
        return [];
      },
    },
    labelRuleValue: {
      type: Object,
      default: function () {
        return {};
      },
    },
    disabledValue: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    removeDomain(item) {
      var index = this.value.indexOf(item);
      if (index !== -1) {
        this.value.splice(index, 1);
      }
      this.$emit("update:value", this.value);
      // this.UpdateSet(this.data1.push);
    },
    addDomain(domain) {
      let pushData = {};
      for (var key in domain) {
        pushData[key] = "";
      }
      this.value.push(pushData);
      this.$emit("update:value", this.value);
    },
    handleValue(val, index, key) {
      // console.log(val, index, key, "avl");
      this.labelRuleValue.value[index][key] = val;
      // this.$emit("update:value", val);
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.arratContent {
  display: flex;
  justify-content: space-between;
  h5 {
    width: 120px;
    font-size: 14px;
    color: #606266;
    line-height: 35px;
    text-align: right;
    padding: 0 12px 0 0;
  }
  .rightContent {
    flex: 1;
    .rightflex {
      display: flex;
      align-items: center;
    }
    ::v-deep .el-form-item {
      width: 85%;
      .el-form-item__content {
        margin-left: 0 !important;
      }
    }
    .el-button {
      margin-left: 5%;
      margin-bottom: 22px;
    }
  }
}
</style>